<template>
  <el-dialog :model-value="dialogVisible" title="选择图标" width="60%" align-center @closed="handleCancel">
    <div style="display: flex; flex-wrap: wrap; height: 500px; overflow-y: auto">
      <div v-for="(name, index) in iconList.icons" :key="index" class="icon-wrap" @click="onSelect(name)">
        <component style="width: 2rem" :is="comps[name]" />
      </div>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { computed, reactive, shallowReactive } from 'vue'
import { ElDialog } from 'element-plus'
import * as ElIcons from '@element-plus/icons-vue'

const props = withDefaults(defineProps<{ visible: boolean }>(), { visible: false })
const emits = defineEmits(['ok', 'update:visible'])

const dialogVisible = computed(() => props.visible)

const comps: any = shallowReactive({ ...ElIcons })

const getIcons = () => {
  let icons = []
  for (const name in ElIcons) {
    icons.push(name)
  }
  return icons
}
const iconList = reactive({ icons: getIcons() })

const onSelect = (name: string) => {
  emits('ok', comps[name])
  emits('update:visible', false)
}
const handleCancel = () => {
  emits('update:visible', false)
}
</script>

<style lang="scss" scoped>
.icon-wrap {
  padding: 1.2rem;
  transition-property: all;
  transition-duration: 0.1s;
  &:hover,
  &:focus {
    cursor: pointer;
    background-color: $--color-bg-gray;
    border-radius: 4px;
  }
}
</style>
